<template>
  <div id="selectClinic">
    <header>
      <i @click="goBack()"></i>
      <span style="width:100%;color:#fff;font-size: 18px;">
        诊室列表
      </span>
    </header>
    <div class='nav'>
      <span class="cateBtn" @click="goCityList">{{currCity}}</span>
    </div>
    <ul class="list">
      <Loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="false">
        <div class='mc' v-if="list.length<1">
          <!-- <img src="../../image/no_collection@2x.png" width='110' alt=""> -->
          <p>暂无诊室!</p>
        </div>
        <li v-for='(item,index) in orderByDistance' :key='index' v-if="list.length>0">
          <a href="#">
            <img :src="item.envirPic?JSON.parse(item.envirPic)[0]:''" width="81" height="102" />
            <div>
              <h3>
                <span>{{item.clinicname}}</span>
                <!-- <i class='red'>{{item.clinictype}}</i> -->
              </h3>
              <p @click.stop="selectAddress(item.address)">
                地址: {{item.address}}</p>
              <div style="width: 100%;
              display: flex;
              justify-content: space-between;">
                <!-- <span>
                  {{item.distance | toInt}}m
                </span> -->
                <i style="color:#b8b8b8">
                    <!-- <img src="../../image/title.png" alt=""> -->
                    {{item.clinictype}}</i>
                <a @click.stop="selectClinic(item.id)">预约</a>
              </div>

            </div>
          </a>
        </li>
      </Loadmore>
    </ul>
  </div>
</template>
<script>
  import {
    Loadmore
  } from 'mint-ui';
  export default {
    data() {
      return {
        id: '',
        pid: '',
        status: '',
        inputAddress: '', //用户输入的地址
        list: [],
        sentPage: {
          page: 1, //分页累加
        }, //接口入参
        totalNum: 0, //总数据条数
        allLoaded: false,
        user: "", //判断入口 是医生点的还是患者点的
        city: '', //用户所在城市
        area: {}, //.city 用户所在城市
        currCity: ''
      }
    },
    components: {
      Loadmore
    },
    computed: {
      orderByDistance() {
        var self = this;
        const list = _.orderBy(this.list, 'distance'); //排序 要引入lodash模块 默认升序
        return list;
      },
    },
    filters: {
      toInt(distance) {
        const str = parseInt(distance);
        return str;
      },

    },
    methods: {
      // 默认定位用户所在城市
      goCityList() {
        this.$router.push({
          name: "cityList",
          query: {
            user: 'doctor'
          }
        });
      },
      selectClinic(id) {
        if (this.$route.query.user == 'doctor') {
          this.$router.push({
            name: "clinicDetail",
            query: {
              user: 'doctor',
              id: id,
            }
          });
        }
        if (this.$route.query.user == 'patient') {
          this.$router.push({
            name: "clinicDetail",
            query: {
              user: 'patient',
              id: id,
            }
          });
        }
        if (this.$route.query.user == 'order') {
          this.$router.push({
            name: "clinicDetail",
            query: {
              user: 'order',
              id: id,
            }
          });
        }
      },
      selectAddress(address) {
        this.$router.push({
          name: "cityClinic",
          query: {
            user: this.user,
            address: address
          }
        });
      },
         // 登录拦截
         isLogin() {
        this.userid = localStorage.getItem("loginMobile");
        if (!this.userid) {
          this.$router.push({
            name: 'login1'
          })
          return false;
        } else {
          return true;
        }
      },
      // 获取诊室列表
      getList(params) {
        var currCity;
        currCity = this.currCity;
        if (this.currCity == '全国') {
          currCity = ""
        }

        this.$api.post(this.$api.baseURLSchool, "calc_near?address=" + currCity + "&org_app_status=1",
        // this.$api.post(this.$api.baseURLSchool, "calc_near?org_app_status=1",
          this.sentPage, r => {
            this.totalNum = r.data.records; //总数据
            if (r.data.ret == -3) {
              localStorage.clear();
              this.isLogin()
            }
            if (this.sentPage.page == 1) {
              this.list = r.data.rows;
            } else {
              this.list = this.list.concat(r.data.rows);
            }
            if (r.data.rows.length == 0 && this.sentPage.page > 1) {
              this.$utils._toast("暂无更多数据");
            }
          }, err => {
            console.log(err);
          })
      },
      //返回上一级
      goBack() {
          console.log(this.$route.query.user)
        if (this.$route.query.user == "patient") {
          this.$router.push({
            name: 'home'
          });
        } else if (this.$route.query.user == "order") {
          this.$router.push({
            name: 'reservation_details',
            query: {
              user: "order",
              id:localStorage.getItem('blid'),
              pid:localStorage.getItem('bldoctorname'),
            //   status: this.status,
            //   doctorname: this.doctorname,
            }
          });
        } else {
          this.$router.push({
            name: 'ImDoctor'
          });
        }
      },
      // 判断入口
      init() {
        this.status = this.$route.query.status;
        this.user = this.$route.query.user;
        if (this.$route.query.id) {
          this.id = this.$route.query.id;
          localStorage.setItem("blid", JSON.stringify(this.id));
        }
        if (this.$route.query.pid) {
          this.pid = this.$route.query.pid;
          localStorage.setItem("bldoctorname", JSON.stringify(this.pid));
        }
        if (this.$route.query.user) {
          this.user = this.$route.query.user;
        } else {
          this.user = "doctor";
        }
        if (this.$route.query.city) { //如果用户有选择地址 则显示用户选的城市 否则显示用户定位城市
          this.currCity = String(this.$route.query.city);
          this.getList();
        } else {
            this.currCity ='全国' 
            this.getList();
        //   this.posCity();
        }
      },
      //上拉加载
      loadBottom() {
        (this.sentPage.page) ++;
        setTimeout(() => {
          this.getList(this.sentPage);
        }, 20);
        if (this.totalNum == this.list.length) {
          this.allLoaded = true;
        }
        this.$refs.loadmore.onBottomLoaded();
      },
    },
    created() {
      this.init();
    },
  }

</script>
<style lang="scss" scoped>
  .mc {
    padding: 40px 0;
    margin: auto;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    img {
      display: block;
      margin: 0 auto;
    }
    p {
      padding-top: 10px;
      text-align: center;
    }
  }

</style>
